<template>
    <!-- <div class="menu-wrap" :style="{width: isCollapse ?  '64px' : '220px'}"> -->
    <div class="menu-wrap" >
        <el-menu
        :default-active="$route.name"
        class="menu-vertical"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        :unique-opened="true"
        >
         <MyMenu :menu-list="userStore.menuRoutes"></MyMenu>
        </el-menu>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import MyMenu from './menuItem.vue'
import useUserStore from '../../store/modules/user'
defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})
let $route = useRoute()
let userStore = useUserStore()
const handleOpen = (key, keyPath) => {
  console.log('open', key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log('close', key, keyPath)
}
</script>

<style lang="scss" scoped>
.menu-wrap{
    height: 100%;
    overflow: hidden;
    .menu-vertical {
        height: 100%;
        overflow: auto;
        
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .menu-vertical:not(.el-menu--collapse) {
      width: 220px;
      min-height: 400px;
    }
    .el-menu {
        --el-menu-bg-color: #477EED;
        --el-menu-text-color: rgba(255,255,255,.8);
        --el-menu-active-color: #fff;
        --el-menu-hover-bg-color: #477EED;
    }
   
    :deep(.el-menu) {
      border: none;
    }
}

</style>